<template>
  <div class="threeScene" ref="threeRef"></div>
</template>
<script>
import { ref , onMounted } from 'vue'
import { MetahumanEventType } from '@/mitt/MetahumanEventType.js'
import emitter from '@/mitt/emitter.js'
import threeScene from '@/assets/3d/main.js'



const  { 
  loadScene,
  LipSyncAnimation,
  bodyAnimation
} = threeScene()




export default  {
  name: 'ThreeScene',
  components:  {},
  props:  {},
  data: () =>  {
    return  {
      threeRef:null,
    
    };
  },
  computed: {
    
  },
  beforeCreate() {

  },
  created() {
  },
  beforeMount() {

  },
  mounted() {
    this.threeRef = this.$refs.threeRef;

    loadScene(this.threeRef)

    emitter.on(MetahumanEventType.LipSyncAnimation, this.LipSyncAnimation.bind(this));
    emitter.on(MetahumanEventType.BodyAnimation, this.BodyAnimation.bind(this));
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
    emitter.off(MetahumanEventType.LipSyncAnimation, this.LipSyncAnimation.bind(this));
    emitter.off(MetahumanEventType.BodyAnimation, this.BodyAnimation.bind(this));
  },
  destroyed() {
  },
  methods:{
    LipSyncAnimation(SyncValue)
    {
      LipSyncAnimation(SyncValue)
    },
    BodyAnimation(action)
    {
      bodyAnimation(action)
    },
  }
}

</script>

<style scoped lang="less">
.threeScene{
  width: 800px;
  height: 1000px;
  // position: absolute;
  // left: 0;
  // top: 0;
}
</style>